<template>
  <div id="return_point_activityGoodAdd">
    <c-title :hide="false" text="新增活动商品"></c-title>
    <div class="cellBox">
      <van-cell-group>
        <van-field v-model="radioName" @click="showPopupTap(1)" readonly label="活动专区" right-icon="arrow" placeholder="请选择活动专区" />
        <van-field v-model="cateRadioName" @click="showPopupTap(2)" readonly label="分类" right-icon="arrow" placeholder="请选择分类" />
        <van-field @click="showPopupTap(3)" readonly label="选择商品" right-icon="arrow" />
      </van-cell-group>
      <div class="selectGoodBox" v-for="item in showGoodList" :key="item">
        <img :src="item.thumb" class="goodImg" alt="" />
        <div class="detail">
          <div class="detailTitle">{{ item.title }}</div>
          <div class="detail_b">
            <span class="dc">¥ {{ item.price }}</span>
            <i class="iconfont icon-ht_operation_delete" @click="deleteGoods(item.id)"></i>
          </div>
        </div>
      </div>
    </div>

    <div class="pos set-pc-style">
      <div class="btn" @click="submitBtn">提交</div>
    </div>
    <van-popup v-model="showActivity" round position="bottom" :style="{ height: '60vh' }">
      <div class="popBox">
        <div class="nav">
          <div class="nav_l" @click="closePopup">取消</div>
          <div class="nav_title">{{ popupModel.showKey == 1 ? "选择活动专区" : popupModel.showKey == 2 ? "选中分类" : "选择商品" }}</div>
          <div class="nav_r" @click="confirmProps">确定</div>
        </div>
        <van-radio-group v-model="radio" v-if="popupModel.showKey == 1">
          <van-cell-group>
            <template v-for="(item, index) in ActivityGood">
              <van-cell :title="`${item.name}`" clickable :key="index" @click="tapSelectItem(item)">
                <template #right-icon>
                  <van-radio :name="item.id" />
                </template>
              </van-cell>
            </template>
          </van-cell-group>
        </van-radio-group>
        <van-radio-group v-model="cateRadio" v-if="popupModel.showKey == 2">
          <van-cell-group>
            <template v-for="(item, index) in Category">
              <van-cell :title="`${item.name}`" clickable :key="index" @click="tapSelectItem(item)">
                <template #right-icon>
                  <van-radio :name="item.id" />
                </template>
              </van-cell>
            </template>
          </van-cell-group>
        </van-radio-group>
        <template v-if="popupModel.showKey == 3">
          <van-search v-model="keyword" shape="round" placeholder="请输入搜索关键词" @search="tapSearch" />
          <div :key="index" v-for="(item, index) in goodList">
            <div class="goodBox" @click="toggle(item, index)">
              <div class="goodBoxLeft">
                <img :src="item.thumb" class="goodBoxLeft_img" alt="" />
                <div class="goodBoxLeft_detail">
                  <div class="goodBoxLeft_detail_title">{{ item.title }}</div>
                  <div class="goodBoxLeft_detail_price">￥{{ item.price }}</div>
                </div>
              </div>
              <van-checkbox v-model="item.select" />
            </div>
          </div>
        </template>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      keyword: "",
      showActivity: false,
      radio: "",
      cateRadio: "",
      goodRadio: [],
      popupModel: {
        showKey: ""
      },
      ActivityGood: [],
      Category: [],
      goodList: [],
      showGoodList: [],
      radioName: "",
      cateRadioName: "",

      popupPage: 1,
      popupTotal_page: 0
    };
  },
  activated() {
    this.init();
  },
  methods: {
    init() {
      this.popupPage = 1;
      this.popupTotal_page = 0;
      this.radio = "";
      this.cateRadio = "";
      this.goodRadio = [];
      this.radioName = "";
      this.cateRadioName = "";
      this.showGoodList = [];
      this.popupModel = {
        showKey: ""
      };
    },
    deleteGoods(id) {
      this.showGoodList.splice();
      const index = this.showGoodList.findIndex(item => item.id === id);
      if (index !== -1) {
        this.showGoodList.splice(index, 1);
      }
    },
    // 提交
    async submitBtn() {
      if (!this.radio) return this.$toast("请先选择活动专区");
      if (!this.cateRadio) return this.$toast("请先选择分类");
      if (!this.showGoodList.length) return this.$toast("请先选择商品");
      let showGoodids = this.showGoodList.map(item => {
        return item.id;
      });
      let json = {
        activity_id: this.radio,
        category_id: this.cateRadio,
        goods_ids: showGoodids
      };
      console.log(json, "json");
      let urlStr = "plugin.return-point.frontend.supplier.activity-goods.add-goods";
      if (this.$route.query.storeTag == 1) {
        urlStr = "plugin.return-point.frontend.store.activity-goods.add-goods";
      }
      let { data, msg, result } = await $http.post(urlStr, json, ".");
      if (result) {
        this.$toast(msg);
        this.$router.go(-1);
      } else {
        this.$toast(msg);
      }
    },
    // 显示弹窗
    async showPopupTap(key) {
      this.ActivityGood = [];
      this.Category = [];
      this.goodList = [];
      if (this.keyword) {
        this.keyword = "";
      }
      if (key == 1) {
        this.ActivityGood = [];
        await this.getActivityGood();
      }
      if (key == 2) {
        this.Category = [];
        if (!this.radio) return this.$toast("请先选择活动专区");
        this.getCategory();
      }
      if (key == 3) {
        this.popupPage = 1;
        await this.getGoods();
      }
      this.popupModel.showKey = key;
      this.showActivity = true;
    },
    tapSelectItem(e) {
      if (this.popupModel.showKey == 1) {
        this.radioName = e.name;
        this.radio = e.id;
        return;
      } else if (this.popupModel.showKey == 2) {
        this.cateRadioName = e.name;
        this.cateRadio = e.id;
        return;
      }
    },
    toggle(item, index) {
      if (item.select) {
        this.goodList[index].select = false;
        if (this.showGoodList.length == 1) {
          this.showGoodList = [];
        } else {
          this.showGoodList.splice(index, 1);
        }
      } else {
        this.goodList[index].select = true;
        this.showGoodList = this.showGoodList.concat(item);
      }
    },

    async getActivityGood() {
      let urlStr = "plugin.return-point.frontend.supplier.activity-goods.get-activity-list";
      if (this.$route.query.storeTag == 1) {
        urlStr = "plugin.return-point.frontend.store.activity-goods.get-activity-list";
      }
      let { data, msg, result } = await $http.post(urlStr, {}, ".");
      if (result) {
        this.ActivityGood = data;
      } else {
        this.$toast(msg);
      }
    },
    async getCategory() {
      let urlStr = "plugin.return-point.frontend.supplier.activity-goods.get-category-list";
      if (this.$route.query.storeTag == 1) {
        urlStr = "plugin.return-point.frontend.store.activity-goods.get-category-list";
      }
      let { data, msg, result } = await $http.post(urlStr, { activity_id: this.radio }, ".");
      if (result) {
        this.Category = data;
      } else {
        this.$toast(msg);
      }
    },
    async getGoods() {
      let urlStr = "plugin.return-point.frontend.supplier.activity-goods.search-goods";
      if (this.$route.query.storeTag == 1) {
        urlStr = "plugin.return-point.frontend.store.activity-goods.search-goods";
      }
      let { data, msg, result } = await $http.post(urlStr, { keyword: this.keyword, page: this.popupPage }, ".");
      if (result) {
        let goodArr = data.data;
        for (let i = 0; i < this.showGoodList.length; i++) {
          for (let k = 0; k < goodArr.length; k++) {
            if (goodArr[k].id == this.showGoodList[i].id) {
              goodArr[k].select = true;
            } else {
              goodArr[k].select = false;
            }
          }
        }
        this.goodList = goodArr;
        this.popupTotal_page = data.last_page;
      } else {
        this.$toast(msg);
      }
    },
    tapSearch() {
      this.popupPage = 1;
      this.popupTotal_page = 0;
      this.getGoods();
    },
    async popupTapMore() {
      if (this.popupPage >= this.popupTotal_page) {
        return;
      } else {
        this.popupPage = this.popupPage + 1;
        let json = {
          page: this.popupPage,
          keyword: this.keyword
        };
        let urlStr = "plugin.return-point.frontend.supplier.activity-goods.search-goods";
        if (this.$route.query.storeTag == 1) {
          urlStr = "plugin.return-point.frontend.store.activity-goods.search-goods";
        }
        let { data, msg, result } = await $http.post(urlStr, json, ".");
        if (result) {
          // 过滤掉已存在于 goodList 中的商品
          const newGoods = data.data
            .filter(newItem => !this.goodList.some(existingItem => existingItem.id === newItem.id))
            .map(item => {
              return item;
            });

          // 将新加载的商品添加到 goodList 中
          this.goodList = this.goodList.concat(newGoods);
        } else {
          this.$toast(msg);
          this.popupPage = this.popupPage - 1; // 回滚页码
        }
      }
    },
    closePopup() {
      this.showActivity = false;
    },
    confirmProps() {
      this.showActivity = false;
    }
  }
};
</script>

<style lang="scss" scoped>
#return_point_activityGoodAdd {
  padding-bottom: 5rem;
  .moreTxt {
    text-align: center;
    color: #999;
  }
  .van-cell__title {
    text-align: left;
  }
  .popBox {
    position: relative;
    padding-bottom: 2rem;
    .goodBox {
      display: flex;
      align-items: center;
      margin: 0 0.75rem;
      margin-bottom: 0.63rem;
      .goodBoxLeft {
        flex: 1;
        display: flex;
        .goodBoxLeft_img {
          width: 3rem;
          height: 3rem;
          border-radius: 1.05rem;
          margin: 0;
        }
        .goodBoxLeft_detail {
          flex: 1;
          text-align: left;
          margin-left: 0.5rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .goodBoxLeft_detail_title {
            text-align: left;
          }
          .goodBoxLeft_detail_price {
            color: #f15353;
          }
        }
      }
    }
    .nav {
      position: sticky;
      top: 0;
      left: 0;
      width: 100%;
      padding: 0.94rem 0.75rem;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 999;
      background: #ffffff;
    }
    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 0.75rem;
      .lis_l {
        flex: 1;
      }
    }
  }

  .diyflex {
    flex-shrink: 0 !important;
    flex: 5.5rem;
  }
  .cellBox {
    margin: 0.63rem 0.75rem 0 0.75rem;
    border-radius: 0.5rem;
    background: #ffffff;
    overflow: hidden;
    .selectGoodBox {
      margin: 0.75rem;
      margin-top: 0;
      padding: 0.63rem;
      box-sizing: border-box;
      background: #f5f5f5;
      display: flex;
      justify-content: space-between;
      border-radius: 0.5rem;
      .goodImg {
        flex-shrink: 0;
        width: 3.75rem;
        height: 3.75rem;
        background: #d6d6dc;
        border-radius: 0.5rem;
        margin: 0;
        margin-right: 0.5rem;
      }
      .detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        .detailTitle {
          font-weight: 500;
          font-size: 0.81rem;
          text-align: left;
        }
        .detail_b {
          width: 100%;
          font-size: 0.75rem;
          color: #6e6e79;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .dc {
            font-weight: bold;
            font-size: 0.81rem;
            color: #f15353;
            margin-right: 0.5rem;
          }
        }
      }
    }
  }
  .pos {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #ffffff;
    .btn {
      margin: 0.63rem 0.75rem;
      text-align: center;
      font-weight: 500;
      font-size: 0.94rem;
      line-height: 1;
      background: #f15353;
      border-radius: 1.28rem;
      color: #ffffff;
      padding: 0.75rem 0;
      box-sizing: border-box;
    }
  }
}
</style>
